<template>
  <div class="chartContainer">
    <div class="title">
      <span class="titleText">{{boxName}} 价格折线图</span>
      <span class="sybTitleText">
        平均价格 {{averagePrice}}
      </span>
    </div>
    <div class="chartInContainer">
      <v-chart :options="option"></v-chart>
    </div>
  </div>
</template>

<script>
import basicMixins from '@/utils/commonChartMixins'

export default {
  name: 'boxPriceLineChart',
  mixins: [basicMixins],
  data() {
    return {
      boxName: '',
      averagePrice: 0
    }
  },
  methods: {
    requestData(property) {
      const option = {
        boxInfoId: this.R.prop('boxInfoId', property)
      }

      this.mRequest('boxApi/getBoxPriceChartByBoxInfoId', option, (res) => {
        this.boxName = this.R.pathOr(this.option, ['data', 'eChartJson', 'name'], res)
        this.averagePrice = this.R.pathOr(this.option, ['data', 'eChartJson', 'averagePrice'], res)
        this.option = this.groupOption(this.R.pathOr(this.option, ['data', 'eChartJson'], res))
      })
    },
    groupOption(obj) {
      return this.oneLineOption(obj)
    }
  }
}
</script>

<style scoped>

</style>
